<template>
  <div>
    <a-alert class="a-alert">
      <div class="alert-item">ETC订单的费用金额以ETC订单到达【已结束】状态时为准，在此之前可能会因为用户操作续单或退单导致变化。</div>
    </a-alert>
    <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData" />
  </div>
</template>
<script setup>
  import { useTable } from '@/hooks/table'
  import { getFeeListApi } from '@/api/order/etcOrder'
  import { onMounted } from 'vue'

  const props = defineProps({
    orderId: String,
  })
  const loadCompulsoryData = () => {
    tableCompulsory.tableLoading = true
    getFeeListApi({ id: props.orderId })
      .then((res) => {
        const result = res.result
        tableCompulsory.dataList = result
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }
  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '费用名称', dataIndex: 'feeName', width: 120, fixed: 'left' },
      { title: '费用类型', dataIndex: 'feeTypeName', width: 120 },
      { title: '收支类型', dataIndex: 'costTypeName', width: 160 },
      { title: '费用金额', dataIndex: 'totalAmount', width: 110, unit: '元' },
      { title: '费用生成时间', dataIndex: 'createTime', width: 180 },
      { title: '费用状态', dataIndex: 'feeStatusName', width: 120 },
    ],
  })
  onMounted(() => {
    loadCompulsoryData()
  })
</script>

<style lang="less" scoped>
  .a-alert {
    margin-bottom: 20px;
    .alert-item {
      font-size: 14px;
      font-weight: 400;
      color: #1890ff;
    }
  }
</style>
